<template>
  <div class="common">
    <div class="common-router" v-show="select">
      <span class="common-Deal" @click="selectAll">{{title}}</span>
      <i class="Arrow-right"></i>
      <span class="All-Category">{{name}}</span>
    </div>
    <div class="common-header clearfix">

      <div class="common-header-title" v-if="!name">{{results || title}}</div>
      <div class="common-header-title" v-else-if="results !== ''">{{results}}</div>
      <div class="common-header-title" v-else-if="name && results === ''">{{title}}</div>
      <div class="common-header-select">
        <span class="select-title">Sort by</span>
        <select id="city" class="select" @change="changedSort">
          <option value="ShelfTimeNewToOld">Create Date: Newest to Oldest</option>
          <option value="ShelfTimeOldToNew">Create Date: Oldest to Newest</option>
          <option value="PriceLowToHigh">Price: Lowest to Highest</option>
          <option value="PriceHighToLow">Price: Highest to Lowest</option>
          <option value="DiscountLowToHigh">Discount: Lowest to Highest</option>
          <option value="DiscountHighToLow">Discount: Highest to Lowest</option>
        </select>
      </div>
    </div>
    <div class="common-Middle">
      <div class="common-Middle-left">
        <div class="common-Middle-left-title">Categories</div>
        <ul class="local-menu">

          <li class="all-Categories" v-if="isFocus !== -1">
            <i class="categorie-arrow_l"></i>
            <span @click="selectAllCategories" class="all-Categories-title">All Categories</span>
          </li>
          <li class="One-Categories" v-if="isFocus > 1">
            <i class="categorie-arrow_l"></i>
            <span @click="selectItem(OneCategories)" class="One-Categories-title">{{this.OneCategories.name}}</span>
            <span class="One-Categories-total">({{this.OneCategories.productCount}})</span>
          </li>

          <li class="direct" v-for="(item, index) in TreeShapeCategories"
              :key="item.categoryId"
              v-if="item.productCount > 0"
              @click.stop.prevent="openCategorie($event,item,index)" v-show="isFocus <2">
            <a :class="{'active':item.name === name && isFocus === 1}" style="cursor: pointer"
               @click="selectItem(item,index)">{{item.name}}</a>
            <span class="Categorie-total">({{item.productCount}})</span>
            <i class="categorie-arrow_r" :class="ShowClassB[index]? 'Upward':'down'"></i>
            <collapse-transition>
              <ul class="categorie-ClassB" ref="ClassB" v-show="ShowClassB[index]" @click.stop>
                <li class="categorie-ClassB-item" v-for="itemSecond in item.children" :key="itemSecond.categoryId"  v-if="itemSecond.productCount > 0">
                  <a :class="{'active':itemSecond.name === Secondname && isFocus === 2}" style="cursor: pointer"
                     @click="selectItemSecond(itemSecond)">{{itemSecond.name}}</a>
                  <span class="categorie-ClassB-total">({{itemSecond.productCount}})</span>
                </li>
              </ul>
            </collapse-transition>
          </li>
          <li class="direct Lmargin13" v-show="isFocus >1">
            <a :class="{'active':SecondCategories.name === Secondname && isFocus === 2}" style="cursor: pointer"
               @click="selectItemSecond(SecondCategories)">{{SecondCategories.name}}</a>
            <span class="Categorie-total">({{SecondCategories.productCount}})</span>
            <collapse-transition>
              <ul class="categorie-ClassB">
                <li class="categorie-ClassB-item" v-for="itemThree in ThreeCategories" :key="itemThree.categoryId" v-if="itemThree.productCount > 0">
                  <a :class="{'active':itemThree.name === ThreeName && isFocus === 3}" style="cursor: pointer"
                     @click="selectItemThree(SecondCategories,itemThree)">{{itemThree.name}}</a>
                  <span class="categorie-ClassB-total">({{itemThree.productCount}})</span>
                </li>
              </ul>
            </collapse-transition>
          </li>

        </ul>
        <div class="Price-Range">Price Range</div>
        <div class="refinement-range">
          <div class="refinement-range-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
            <div id="dragLen" class="ui-slider-range ui-widget-header ui-corner-all c-bg-prim"
                 style="left: 22px; width: 210.5px;"></div>
            <span class="ui-slider-handle ui-state-default ui-corner-all-handle cir" tabindex="0"
                  style="left: 25px;" id="circleLeft"></span>
            <span class="ui-slider-handle ui-state-default ui-corner-all-handle cir" tabindex="0"
                  style="left: 232.5px;" id="circleRight"></span>
          </div>

          <div class="refinement-range-input-container">
            <span class="refinement-range-input-unit">$</span>
            <div class="refinement-range-input refinement-range-minInput">
              <input title="Price Range min" type="text" @keyup.enter="changePrice(0)" v-model="minPrice"
                     aria-label="Price Range Min Input">
            </div>

            <span class="refinement-range-input-range-text">to</span>

            <div class="refinement-range-input refinement-range-maxInput">
              <input title="Price Range max" type="text" @keyup.enter="changePrice(1)" v-model="maxPrice"
                     aria-label="Price Range Max Input">
            </div>
          </div>
          <div class="refinement-range-error-message"></div>
          <div class="refinement-range-error-message"></div>
        </div>
      </div>

      <div class="common-Middle-right">
        <a class="main-Product" id="mainProduct" ref="mainProduct" v-show="JSON.stringify(this.mainData) !=='{}'"
           @click="selectMain(mainData)">
          <div class="right-box">
            <div class="img-box">
              <img v-lazy="imgUrl + src + '?x-oss-process=image/resize,h_246,limit_0'">
              <div :class="[isCashback ?'a-spacing-small showVisibility':'a-spacing-small hideVisibility']">
                <span class="a-badge-label">
                <span class="a-badge-label-inner a-text-ellipsis">
                  <span class="a-badge-text">Best Seller</span>
                </span>
                </span>
              </div>
            </div>
          </div>
          <div class="Product-information">
            <div class="Product-title">{{headLineOne}}</div>
            <div class="Product-introduction">
              <span class="Product-introduction-bought">{{mainData.soldCount}} bought</span>
              <span class="Product-introduction-content">
             {{headLineTwo}}
            </span>
              <ul class="large-star-box">
                <li class="large-star-item" v-for="stars in 5"
                    :class="stars > mainData.starScope && stars < mainData.starScope +1 ? 'li-half' : ''">
                  <template v-if="stars > stars > mainData.starScope && stars < mainData.starScope +1">
                    <i class="material-icons yellow">star</i>
                    <i class="material-icons gray">star</i>
                  </template>
                  <template v-else>
                    <i class="material-icons" :class="stars <= mainData.starScope?'yellow':'gray'">star</i>
                  </template>
                </li>
                <li class="large-comment">(<span style="vertical-align: -1px">{{mainData.reviewCount}}</span>)</li>
              </ul>
              <div class="Price-box">
                <s class="Original-price" v-if="mainData.discountRate != 0">${{mainData.originalPrice}}</s>
                <span class="Present-price">${{mainData.price}}</span>
                <span class="Product-off" v-if="mainData.discountRate != 0">{{(mainData.discountRate * 100).toFixed(0)}}% OFF</span>
              </div>
              <button data-v-7b63ac08="" class="View-Deals">View Deals</button>
            </div>
          </div>
        </a>
        <div class="second-Product">
          <ul class="second-Product-box">
            <li class="product-item" v-for="(item, index) in data" @click="selectSku(item)" :key="item.sku">
              <product :data='item' :category="_category(item.categoryId)"></product>
            </li>
          </ul>
        </div>
        <div class="common-page">
          <PageInation @changePage="changePages" :pages="totalPages" :curPage="($route.query.page - 0)"></PageInation>
        </div>
        <LoadOverlay v-show="ProductLoading"></LoadOverlay>
        <div class="Hint-information" v-if="Hint">Our deal searchers couldn't find any nearby "{{input}}" deals at the
          moment.
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import product from 'components/product/product'
  import PageInation from 'base/pageination/pageination'
  import LoadOverlay from 'base/load-overlay/load-overlay'
  import {getCategory, prefixStyle} from 'common/js/dom'
  import {mapMutations, mapGetters} from 'vuex'
  import CollapseTransition from 'common/js/collapse-transition'
  import {addClass, removeClass, hasClass} from 'common/js/dom'
  const transform = prefixStyle('transform')

  export default {
    data() {
      return {
        Data:[],
        select: false,
        leftX: 0,
        rightX: 100,
        nowIndex: -1,
        name: '',
        Secondname: '',
        ThreeName: '',
        left: 25,
        right: 232.5,
        minPrice: 1,
        maxPrice: 999,
        imgUrl: imgUrl,
        headLineOne: '',
        headLineTwo: '',
        category: '',
        src: '',
        current: '',
        currentIndex: -1,   //当前所属一级分类下标
        categoryIDArr: [],   //一级分类id集合
        largeStar: 4,
        largeComment: 4,
        ShowClassB: [],  //二级分类是否展开
        isCashback: false,
        isFocus: -1,  //焦点分类改变颜色
        OneCategories: [], //焦点一级分类数据
        SecondCategories: [], //焦点二级分类数据
        ThreeCategories: [],  //三级分类数据
        TreeShapeCategories:[]
      }
    },
    props: {
      data: {
        type: Array,
        default: function () {
          return []
        }
      },
      mainData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      title: {
        type: String,
        default: ''
      },
      results: {
        type: String,
        default: ''
      },
      input: {
        type: String,
        default: ''
      },
      totalPages: {
        type: Number,
        default: 0
      },
      Hint: {
        type: Boolean,
        default: false
      },
      ProductLoading: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapGetters([
        'selectSecondCategory',
        'selectThreeCategory',
        'selectOneCategory',
        'categoryIndex',
        'categoryName',
        'CategoryFocus'
      ]),
    },
    created() {
      const _this = this
      let t2 = setInterval(() => {
        _this.TreeShapeCategories = JSON.parse(window.localStorage.getItem("TreeShapeCategories"))
        if (_this.TreeShapeCategories !== null) {
          clearInterval(t2)
        }
      }, 100)
      this.OneCategories = this.selectOneCategory
      this.SecondCategories = this.selectSecondCategory
      this.ThreeCategories = this.SecondCategories.children
      this.isFocus = this.CategoryFocus
      const path = this.$router.currentRoute.fullPath.split('/')
      this.current = path[1]
      this.HandleCategory()
    },
    mounted() {
      const _this = this
      $('#circleLeft').on('mousedown', function (e) {
        const that = $(this)
        let x = parseInt($(this).css('left'))
        const startX = e.pageX
        $('body').off('mousemove')
        $('body').on('mousemove', function (ev) {
          let moveX = ev.pageX - startX + x
          if (moveX <= 25) {
            moveX = 25
          }
          if (moveX >= _this.right) {
            moveX = _this.right
          }
          _this.left = moveX
          let rate = (_this.left - 25) / 207.5
          $('#dragLen').css({
            left: _this.left + 'px',
            width: _this.right - _this.left + 'px'
          })
          _this.minPrice = Math.round(998 * rate + 1)
          if (moveX >= _this.right) {
            _this.minPrice = _this.maxPrice
          }
          that.css('left', moveX + 'px')
        })
        $('body').off('mouseup')
        $('body').on('mouseup', function (e) {
          _this.$emit('changePrice', _this.minPrice, _this.maxPrice)
          $('body').off('mousemove')
        })
        return false
      })
      $('#circleRight').on('mousedown', function (e) {
        const that = $(this)
        let x = parseInt($(this).css('left'))
        const startX = e.pageX
        $('body').off('mousemove')
        $('body').on('mousemove', function (ev) {
          let moveX = ev.pageX - startX + x
          if (moveX <= _this.left) {
            moveX = _this.left
          }
          if (moveX >= 232.5) {
            moveX = 232.5
          }
          if (moveX <= _this.left) {
            moveX = _this.left
          }
          _this.right = moveX
          let rate = (_this.right - 25) / 207.5
          _this.maxPrice = Math.round(998 * rate + 1)
          if (_this.maxPrice < _this.minPrice) {
            _this.maxPrice = _this.minPrice
          }
          $('#dragLen').css({
            left: _this.left + 'px',
            width: _this.right - _this.left + 'px'
          })
          that.css('left', moveX + 'px')
        })
        $('body').off('mouseup')
        $('body').on('mouseup', function (e) {
          _this.$emit('changePrice', _this.minPrice, _this.maxPrice)
          $('body').off('mousemove')
        })
        return false
      })
    },
    methods: {
      HandleCategory() {
        const _this = this
        setTimeout(() => {
          _this.TreeShapeCategories.forEach((item) => {
            //循环出对应的布尔数组 来操作dom
            this.ShowClassB.push(false)
            let Arr = []
            Arr.push(item.name)
            Arr = Arr[0]
            _this.categoryIDArr.push(item.categoryId)
            //通过截取路由分类名与树形二级分类数据作对比 对应分类高亮
            item.children.forEach((itemSecond) => {
              let SecondArr = []
              SecondArr.push(itemSecond.name)
              // let parentIDArr = ''
              // parentIDArr = itemSecond.parentId
              // 循环分类id数组 匹配二级子分类
              // _this.categoryIDArr.forEach((item) => {
              //   if (item === parentIDArr) {
              //     _this.currentIndex = _this.categoryIDArr.lastIndexOf(item)
              //   }
              // })
              SecondArr = SecondArr[0]
              let NewSecondArr = SecondArr.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
              NewSecondArr = NewSecondArr.join('')
              let Pathname = this.$route.params.id
              if (Pathname === undefined) {
                return false
              } else {
                Pathname = Pathname.replace(/-/g, '').split(' ');
                Pathname = Pathname.join('')
                if (NewSecondArr === Pathname) {
                  _this.Secondname = itemSecond.name
                  //  匹配到二级分类所属的一级分类--展开分类
                  // _this.ShowClassB.splice(_this.currentIndex, 0, true)
                }
              }
              //通过截取路由分类名与树形三级分类数据作对比 对应分类高亮
              itemSecond.children.forEach((itemThree) => {
                let ThreeArr = []
                ThreeArr.push(itemThree.name)
                ThreeArr = ThreeArr[0]
                let NewSecondArr = ThreeArr.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
                NewSecondArr = NewSecondArr.join('')
                let Pathname = this.$route.params.id
                if (Pathname === undefined) {
                  return false
                } else {
                  Pathname = Pathname.replace(/-/g, '').split(' ');
                  Pathname = Pathname.join('')
                  if (NewSecondArr === Pathname) {
                    _this.ThreeName = itemThree.name
                  }
                }
              })
            })
            //通过截取路由分类名与树形一级分类数据作对比 对应分类高亮
            let NewArr = Arr.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
            NewArr = NewArr.join('')
            let Pathname = this.$route.params.id
            if (Pathname === undefined) {
              return false
            } else {
              Pathname = Pathname.replace(/-/g, '').split(' ');
              Pathname = Pathname.join('')
              if (NewArr === Pathname) {
                _this.name = item.name
              }
            }
          })
        }, 200)
      },
      changePrice(index) {
        if (this.minPrice <= 1) {
          this.minPrice = 1
        } else if (this.minPrice > this.maxPrice && index === 0) {
          this.minPrice = this.maxPrice
        }
        if (this.maxPrice >= 999) {
          this.maxPrice = 999
        } else if (this.maxPrice < this.minPrice && index === 1) {
          this.maxPrice = this.minPrice
        }
        let rate = (this.maxPrice - this.minPrice) / 998
        if (index) {
          this.right = parseInt(this.left + 207.5 * rate)
          $('#circleRight').css('left', this.right + 'px')
        } else {
          this.left = parseInt(this.right - 207.5 * rate)
          $('#circleLeft').css('left', this.left + 'px')
        }
        $('#dragLen').css({
          left: this.left + 'px',
          width: this.right - this.left + 'px'
        })
        this.$emit('changePrice', this.minPrice, this.maxPrice)
      },
      changedSort() {
        let val = $('#city').val()
        this.$emit('changedSort', val)
      },
      _category(id) {
        return getCategory(id)
      },
      _strFormat(str, len) {
        if (str.length && str.length > len) {
          return str.substring(0, len) + '...'
        }
        return str
      },
      //展开分类
      openCategorie(e, item, index) {
        if (this.ShowClassB[index]) {
          this.ShowClassB.forEach((b, t) => {
            this.$set(this.ShowClassB, t, false)
          })
        } else {
          this.ShowClassB.forEach((b, t) => {
            this.$set(this.ShowClassB, t, false)
          })
          this.ShowClassB.splice(index, 1, true)
        }
        this.currentIndex = index
        this.OneCategories = item
      },
      //获取当前模块的分类
      selectAll() {
        this.ShowClassB.splice(this.currentIndex, 1, false)
        this.$router.push(`/${this.current}`)
        this.select = false
        this.isFocus = -1
        this.name = ''
        this.setClass({
          categoryId: ''
        })
      },
      //获取所有分类
      selectAllCategories() {
        this.ShowClassB.splice(this.currentIndex, 1, false)
        this.$router.push('/categories')
        this.select = false
        this.isFocus = -1
        this.name = ''
        this.setClass({
          categoryId: ''
        })
      },
      //获取一级分类
      selectItem(item) {
        this.select = true
        this.isFocus = 1
        this.name = item.name
        this.$emit('selectCategory', item)
        this.setClass(item)
      },
      selectItemSecond(itemSecond) {
        this.select = true
        this.isFocus = 2
        this.Secondname = itemSecond.name
        this.$emit('selectSecondCategory',itemSecond)
        this.setClass(itemSecond)
        this.SecondCategories = itemSecond
        this.ThreeCategories = this.SecondCategories.children
      },
      selectItemThree(itemSecond,itemThree) {
        this.select = true
        this.isFocus = 3
        this.ThreeName = itemThree.name
        this.$emit('selectThreeCategory',itemSecond,itemThree)
        this.setClass(itemThree)
      },
      selectSku(item) {
        this.$emit('select', item)
      },
      selectMain(item) {
        this.$emit('selectSku', item)
      },
      changePages(num) {
        if(this.$route.query.category) {
          this.$router.push({
            path: `${this.$route.path}?category=${this.$route.query.category}`,
            query: {page: num}
          })
        } else {
          this.$router.push({
            path: `${this.$route.path}`,
            query: {page: num}
          })
        }
        this.$emit('changePage', num)
      },
      ...mapMutations({
        setClass: 'SET_CATEGORIES'
      })
    },
    watch: {
      name() {
        if (this.name !== '') {
          this.select = true
        }
      },
      selectOneCategory() {
        this.OneCategories = this.selectOneCategory
      },
      categoryName() {
        this.isFocus = this.CategoryFocus
        const path = this.$router.currentRoute.fullPath.split('/')
        this.current = path[1]
        this.HandleCategory()
      },
      selectSecondCategory() {
        this.SecondCategories = this.selectSecondCategory
        this.ThreeCategories = this.SecondCategories.children
      },
      mainData() {
        if(JSON.stringify(this.mainData) !== '{}') {
          this.headLineOne = this._strFormat(this.mainData.headLine, 34)
          this.headLineTwo = this._strFormat(this.mainData.headLine, 100)
          this.category = this._category(this.mainData.categoryId)
          this.src = this.mainData.image.src
          this.isCashback = (this.mainData.promotionType !== 'Cashback')
        }
      }
    },
    components: {
      product,
      PageInation,
      LoadOverlay,
      CollapseTransition
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/index"
  .showVisibility
    display: none !important
  .hideVisibility
    display: inline-block !important
  .show
    display block
  .hide
    display none
  .down
    transform: rotate(90deg);
    transition: all 0.4s;
  .Upward
    transform: rotate(270deg);
    transition: all 0.4s;

  .ToRight
    transition: all 0.4s

  .c-bg-prim
    color: #53a318

  .active
    color: #0185c6 !important

  .common
    .common-router
      display flex
      font-size 12px
      margin 26px 0
      .common-Deal
        cursor pointer
        color: #56adf0
        vertical-align middle
      .Arrow-right
        background url("../../../static/img/arrow-right.svg")
        margin-right 3px
        width 16px
        position relative
        top: -2px
    .common-header
      border-bottom dashed 1px #ccc
      padding-bottom 17px
      position relative
      margin-top: 20px;
      .common-header-title
        font-size 28px
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display inline-block
        line-height 36px
      .common-header-select
        float right
      .select-title
        font-size 14px
      .select
        display: inline-block;
        width: 273px;
        background-color: #fff
        border: 1px solid #a5a8ab
        border-radius: 2px;
        font-size: 16px;
        margin: 0 24px;
        transition: background-color .25s ease-out, border-color .25s ease-out, color .25s ease-out;
        background: no-repeat 100%;
        background-image: url(../../../static/img/arrow-green.svg);
        background-size: 40px 20px
        padding: 8px 36px 8px 12px;
        appearance: none;
        outline none
    .common-Middle
      display flex
      .common-Middle-left
        width 257px
        margin-top 20px
        margin-bottom: 75px;
      .common-Middle-left-title
        font-size 20px
        border-bottom 1px solid #ececec
        padding-bottom 8px
      .local-menu
        font-size 13px
        margin-top 8px
        line-height 2
      .all-Categories
        cursor pointer
        .categorie-arrow_l
          background url("../../../static/img/arrow_r.png") center center no-repeat
          position: relative;
          top: 2px;
          display: inline-block;
          width: 8px;
          height: 15px;
          transform rotate(180deg)
        .all-Categories-title
          color: #656565
          font-size 13px
          margin-left 2px
        .all-Categories-title:hover
          color: #0185c6
      .One-Categories
        cursor pointer
        .categorie-arrow_l
          background url("../../../static/img/arrow_r.png") center center no-repeat
          position: relative;
          top: 2px;
          display: inline-block;
          width: 8px;
          height: 15px;
          transform rotate(180deg)
        .One-Categories-title
          color: #656565
          font-size 13px
          margin-left 2px
        .One-Categories-title:hover
          color: #0185c6
      .direct a
        color: #656565
      .direct
        .categorie-arrow_r
          background url("../../../static/img/arrow_r.png") center center no-repeat
          position: relative;
          left: 5px;
          top: 2px;
          display: inline-block;
          width: 8px;
          height: 12px;
        .Categorie-total
          color: #888
          cursor pointer
        .categorie-ClassB
          padding-left 10px
          .categorie-ClassB-item
            .categorie-ClassB-total
              color: #888
              cursor pointer
          .categorie-ClassB-item a:hover
            color: #0185c6;

      .direct a:hover
        color: #0185c6;

      .Price-Range
        font-size 20px
        margin-top 30px
        border-bottom 1px solid #ececec
        padding-bottom 8px
      .refinement-range
        margin-top: 35px;
        .refinement-range .refinement-range-slider
          margin: 25px;
        .ui-slider-horizontal
          background-color: #d5d5d5;
          height: 4px;
          position: relative;
          .ui-slider-range
            background-color: #53a318;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 1;
          .ui-slider-handle
            background-color: #fff;
            border-radius: 100%;
            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .2);
            height: 23px;
            margin-left: -25px;
            outline: none;
            position: absolute;
            top: -12.5px;
            -ms-touch-action: none;
            touch-action: none;
            width: 23px;
            z-index: 2;
          .ui-slider-handle:last-child
            margin-left: 0;
          .ui-slider-horizontal:after
            left: 100%;
            position: absolute;
            top: 0;
          .ui-slider-horizontal:after, .ui-slider-horizontal:before
            background-color: #d5d5d5;
            content: " ";
            display: block;
            height: 4px;
            width: 25px;
          .ui-slider-horizontal:before
            margin-left: -25px;
          .ui-slider-horizontal:after, .ui-slider-horizontal:before
            background-color: #d5d5d5;
            content: " ";
            display: block;
            height: 4px;
            width: 25px;
      .refinement-range-input-container
        display: flex;
        font-size: 13px;
        margin-top: 35px;
        line-height 30px
        .refinement-range-input-unit
          font-size: 14px;
          border-right: 3px solid transparent;
          vertical-align: middle;
        .refinement-range-input
          vertical-align: middle;
        .refinement-range-input input
          border: 1px solid #d8d8d8;
          height: 30px;
          padding-left: 8px;
          padding-right: 8px;
          width 90px
          outline none
        .refinement-range-input-range-text
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          font-size: 16px;
          text-align: center;
          vertical-align: middle;
      .common-Middle-right
        position relative
        .main-Product
          width 790px
          height 266px
          display flex
          cursor pointer
          margin-left 20px
          margin-top 18px
          border-bottom 1px solid #ccc
          .right-box
            position relative
            width 426px
            padding 10px
            .img-box
              height 100%
              text-align center
            .img-box img
              height 100%
              transition: all .3s
              max-width: 100%;
            .img-box img:hover
              transform: scale(1.07)
            .a-spacing-small
              position absolute
              left 0
              top 0
              margin-bottom: 10px
              text-decoration: none;
              display inline-block
              .a-badge-label
                max-width: 140px;
                padding: 0 0.5rem 0 0.9rem;
                position: relative;
                height: 2.4rem;
                z-index: 1;
                float: left;
                background-color: #ff9600 !important;
                color: #ff9600 !important;
                .a-badge-label-inner
                  font-size: 12px;
                  color: #fff;
                  line-height: 2.4rem;
                  height: 2.4rem;
                  .a-badge-text
                    font-size 14px
              .a-badge-label:after
                content: "";
                width: 1rem;
                height: 2.4rem;
                border-right: 1rem solid transparent;
                border-top: 2.4rem solid;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: absolute;
                top: 0;
                right: -1rem;
          .Product-information
            width 361px
            text-align left
            margin-left 12px
            .Product-title
              font-size 16px
              line-height: 1.4;
              color: #343434
            .Product-introduction
              color: #a9a9a9
              font-size 14px
              margin-top 8px
              position relative
              .Product-introduction-bought
                margin-bottom 11px
                display block
              .Product-introduction-content
                line-height 1.4
              /*
            .classification
              margin-top 25px
              font-size 13px
              */
              .large-star-box
                display: flex
                cursor: pointer
              .large-star-item
                width: 21px;
              .large-star-item i
                font-size 21px
              .large-comment
                font-size 15px
                color: #a1a0a0
                margin-left 2px
                line-height 20px;
              .li-half
                position: relative
                .yellow
                  width: 9px
                  overflow: hidden
                  position: absolute
                  left: 0
              .Price-box
                text-align right
                margin-top 10px
                position relative
                .Original-price
                  color: #999
                  font-size 16px
                  margin-right 5px
                  display inline-block
                .Present-price
                  color: #18823a
                  display inline-block
                  font-size 20px
                  font-weight bold
                .Product-off
                  text-align right
                  color: #fe3838 !important;
                  font-size: 12px;
                  border: 1px solid;
                  display: block;
                  position absolute
                  right 0
                  bottom -27px
                  padding: 3px 7px;
                  border-radius 3px
              /*.forms-time
                display inline-block
                text-align right
                position absolute
                right: 0
                font-size: 14px;
                bottom: -23px;
              .time
                background url("../../../static/img/datetime-b.png") no-repeat
                display inline-block
                width 1rem
                height 0.8rem
                vertical-align middle
                background-size 12px
              .time-text
                vertical-align middle*/
              .View-Deals
                width: 182px
                position absolute
                bottom -75px
                right 0
                height: 40px
                background-color #18823a
                color #fff
                font-size: 16px
                line-height: 1.8rem;
                display block
                margin auto
                outline none
                border 0
                border-radius 5px
                cursor pointer
        .Hint-information
          width: 100%;
          border: 1px solid #ccc;
          padding: 20px 24px;
          margin-left: 23px;
        .second-Product
          margin-left 23px
          overflow hidden
          .second-Product-box
            display flex
            flex-wrap: wrap;
            width 800px
            .product-item
              margin-right 22px
              border-bottom 1px solid rgb(230, 230, 230)
              margin-top 20px
              width: 377px;
        .common-page
          margin-top 68px
          margin-bottom 76px
</style>
